<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>注册账号</title>
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <style type="text/css">
    	.con-form .con-li .li-arrow {
		    width: .14rem;
		    height: .24rem;
		    margin-top: .4rem;
		    margin-left: .16rem;
		}
		.lab-text{
			padding: 0rem 1rem 0rem 0rem;
		}
    </style>
</head>
<body class="register">
<div class="main" style="padding-top: 2.18rem">
    <div class="container">
        <img src="/images/logo.png" alt="" class="logo-img">
        <p class="big-title">注册账号</p>
        <div class="con-form">
            <div class="con-li">
                <div class="li-text"><span>手机号</span></div>
                <input type="tel" placeholder="请输入手机号码" class="li-input" id="phoneNum" maxlength="11">
            </div>
            <div class="con-li">
                <div class="li-text"><span>验证码</span></div>
                <input type="tel" placeholder="请输入验证码" class="li-input" id="code" maxlength="6">
                <label class="get-code take-code">获取验证码</label>
                <label class="get-code got-code">已获取(<label id="time">60</label>s)</label>
            </div>
            <div class="con-li">
                <div class="li-text"><span>密码</span></div>
                <input type="password" placeholder="6-20个字符" class="li-input" id="password" maxlength="20">
            </div>
            <div class="con-li">
                <div class="li-text"><span>确认密码</span></div>
                <input type="password" placeholder="6-20个字符" class="li-input" id="payPassword" maxlength="20">
            </div>
           	<div class="con-li">
                <div class="li-text"><span>推荐人</span></div>
                <input type="text" value="${name}" class="li-input" disabled="disabled">
            </div>
        </div>
        <input type="hidden" id="inviteCode" value="${inviteCode }">
        <div class="protocol-text">
            <span>注册即视为同意</span>
            <c:choose>
	            <c:when test="${!empty agree }"><a href="/share/agree?type=${agree.type }" class="text-a">《${agree.title }》</a></c:when>
	            <c:otherwise><a href="#" class="text-a">《协议》</a></c:otherwise>
            </c:choose>
        </div>
        <div class="reg-btn" id="regist_btn" onclick="proving()">注册</div>
        <a class="reg-btn" style="margin-top:.20rem" href="/share/download">下载</a>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/calc.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<script>
    // 60秒倒计时
    var setTime;
    $(function(){
    	var proidx = 0;
    	var cityidx = 0;
    	var areaidx = 0;
        var time = parseInt($("#time").text());
        $(".take-code").on("click",function(){
            var phoneNum = document.getElementById("phoneNum").value;
               $.ajax({
				url:"/sendRegisterCode",
				type:"post",
				data:{"login":phoneNum, "type":1},
				dataType:"json",
				success:function(data){
					if(data.status){
						$(".got-code").show();
		                $(".take-code").hide();
						setTime=setInterval(function(){
		                	console.log(1);
		                    if(time<=0){
		                        clearInterval(setTime);
		                        $(".got-code").hide();
		                        $(".take-code").show();
		                        time = 60;
		                        return;
		                    }
		                    time--;
		                    $("#time").text(time);
		                },1000);
					}else{
						layer.open({
			                content: data.desc
			                ,skin: 'msg'
			                ,time: 1.5
			            });
					}
				}
			});
        })
    });
    //验证
    function proving(){
        let phoneNum = document.getElementById("phoneNum").value,
            code = document.getElementById("code").value,
            password = document.getElementById("password").value,
            payPassword = document.getElementById("payPassword").value;
        if(phoneNum.length === 0){
            layer.open({
                content: '请输入手机号码'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(code.length === 0){
            layer.open({
                content: '验证码不能为空'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(password.length === 0){
            layer.open({
                content: '密码不能为空'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(password.length <6 || password.length >20){
            layer.open({
                content: '请输入6-20位密码'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if (password != payPassword) {
        	layer.open({
                content: '两次密码输入不一致'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else{
        	$("#regist_btn").attr("onclick","");
            //do something
            $.ajax({
        		url:"/share/handleScanRegister",
        		type:"post",
        		data:{
        			"login":$("#phoneNum").val(),
        			"imgCode":"-1",
                    "validCode":$("#code").val(),
        			"password":$("#password").val(),
        			"inviteCode":$("#inviteCode").val()
        		},
        		dataType:"json",
        		success:function(data){
        			$("#regist_btn").attr("onclick","proving()");
        			if(data.status){
        				layer.open({content: data.desc,skin: 'msg',time: 2, end:function(){
        					window.location.href="/share/download";
        				}});
        			}else{
        				layer.open({content: data.desc,skin: 'msg',time: 2});
        			}
        		},error:function(e){
        			$("#regist_btn").attr("onclick","proving()");
        		}
        	});
        }
    }
    
    
</script>
</body>
</html>